<!-- src/views/post/PostDetail.vue -->
<template>
  <a-card class="post-detail-container">
    <div class="header">
      <h1>{{ post.title }}</h1>
      <div class="meta">
        <a-space>
          <span>作者ID: {{ post.userId }}</span>
          <span>发布于: {{ formatDate(post.createTime) }}</span>
          <span>最后更新: {{ formatDate(post.updateTime) }}</span>
        </a-space>
      </div>
      <div class="tags">
        <a-tag v-for="tag in post.tags" :key="tag" color="blue"
          >{{ tag }}
        </a-tag>
      </div>
    </div>

    <div class="content" v-html="post.content"></div>

    <div class="footer">
      <a-space>
        <a-button type="text" @click="handleLike">
          <icon-thumb-up />
          {{ post.thumbNum }} 点赞
        </a-button>
        <a-button type="text" @click="handleFavour">
          <icon-star />
          {{ post.favourNum }} 收藏
        </a-button>
        <a-button v-if="isOwner" type="text" @click="handleEdit">编辑</a-button>
        <a-popconfirm
          v-if="isOwner || isAdmin"
          content="确定要删除这个帖子吗？"
          @ok="handleDelete"
        >
          <a-button type="text" status="danger">删除</a-button>
        </a-popconfirm>
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import { IconThumbUp, IconStar } from "@arco-design/web-vue/es/icon";
import {
  PostControllerService,
  PostThumbControllerService,
  PostFavourControllerService,
} from "../../../generated";
import { useStore } from "vuex";
import dayjs from "dayjs";

const route = useRoute();
const router = useRouter();
const store = useStore();

const postId = ref(route.params.id);
const post = ref({
  title: "",
  content: "",
  tags: [],
  thumbNum: 0,
  favourNum: 0,
  userName: "",
  createTime: "",
  updateTime: "",
});

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format("YYYY-MM-DD HH:mm");
};

// 检查是否是帖子所有者或管理员
const isOwner = computed(() => {
  return store.state.user.loginUser?.id === post.value.userId;
});

const isAdmin = computed(() => {
  return store.state.user.loginUser?.userRole === "admin";
});

// 加载帖子详情
const loadPostDetail = async () => {
  try {
    const res = await PostControllerService.getPostVoByIdUsingGet(postId.value);
    if (res.code === 0) {
      post.value = {
        ...res.data,
        tags: res.data.tagList || [],
        userName: res.data.user?.name || "未知用户",
      };
    } else {
      Message.error(res.message || "帖子不存在");
      router.back();
    }
  } catch (e) {
    Message.error("加载帖子详情失败");
    router.back();
  }
};

// 点赞
const handleLike = async () => {
  try {
    const res = await PostThumbControllerService.doThumbUsingPost({
      postId: postId.value,
    });
    if (res.code === 0) {
      Message.success(res.message || "点赞成功");
      post.value.thumbNum += res.data; // 使用API返回的更新值
    } else {
      Message.error(res.message || "点赞失败");
    }
  } catch (e) {
    console.error("点赞出错:", e);
    Message.error("点赞失败");
  }
};

// 收藏

const handleFavour = async () => {
  try {
    const res = await PostFavourControllerService.doPostFavourUsingPost({
      postId: postId.value,
    });
    if (res.code === 0) {
      Message.success(res.message || "收藏成功");
      post.value.favourNum += res.data; // 使用API返回的更新值
    } else {
      Message.error(res.message || "收藏失败");
    }
  } catch (e) {
    console.error("收藏出错:", e);
    Message.error("收藏失败");
  }
};

// 编辑
const handleEdit = () => {
  router.push(`/post/edit/${postId.value}`);
};

// 删除
const handleDelete = async () => {
  try {
    const res = await PostControllerService.deletePostUsingPost({
      id: postId.value,
    });
    if (res.code === 0) {
      Message.success("删除成功");
      router.push("/post/list");
    }
  } catch (e) {
    Message.error("删除失败");
  }
};

onMounted(() => {
  loadPostDetail();
});
</script>

<style scoped>
.post-detail-container {
  margin: 20px;
  max-width: 800px;
}

.header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border-2);
  padding-bottom: 20px;
}

.header h1 {
  margin-bottom: 10px;
}

.meta {
  color: var(--color-text-3);
  margin-bottom: 10px;
}

.tags {
  margin-top: 10px;
}

.content {
  margin: 20px 0;
  line-height: 1.8;
}

.footer {
  border-top: 1px solid var(--color-border-2);
  padding-top: 20px;
  margin-top: 20px;
}
</style>
